<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>选择器的优先级</title>
        <style>
            #box {
                width: 200px;
                height: 200px;
                background: red;
            }

            [class] {
                width: 100px;
                background: yellow;
            }

            div {
                width: 100px !important;
            }

            p>* {
                background: blue;
            }

            p * {

            }
            
            /* 选中页面中的所有元素 */
            * {

            }
            
            /* 群组选择器 */
            div>a, span, p {
                width: 200px;
            }

            div>a {
                width: 200px;
            }

            span {
                width: 200px;
            }

            p {
                width: 200px;
            }

        </style>
    </head>
    <body>
        <!-- 
            !important: 10000以上
            行内样式优先级：1000
            id: 100
            class，属性，伪类: 10
            元素选择器, 伪元素选择器: 1
            *: < 1

            p: 1

            div.a: 1 + 10 = 11
            #box>.a: 100 + 10 = 110
            div#box>p span: 1 + 100 + 1 + 1 = 103
            div p>.span : 1 + 1 + 10 = 12
            div.a.b>.c: 31

         -->
        <div style="height: 50px;" id="box" class="a"></div>

        <p>
            <a href="">你好</a>
            <span>对的</span>
        </p>
        
    </body>
</html>